<!DOCTYPE html>
<html>
<head>
<title>Energy Level Diagram</title>
<style>
    body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; }
    canvas { background-color: white; border: 1px solid #999; }
</style>
</head>
<body>

<canvas id="myCanvas" width="600" height="450"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings to mimic the hand-drawn look
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round'; // Makes line ends smoother

    // Helper function to draw an arrow (line + head)
    function drawArrow(fromx, fromy, tox, toy) {
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        drawArrowHead(fromx, fromy, tox, toy);
    }
    
    // Helper function to draw just the arrowhead at the 'to' point
    function drawArrowHead(fromx, fromy, tox, toy) {
        const headlen = 12;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Coordinates for energy levels
    const y1 = 380; // E1
    const y2 = 280; // E2
    const y3_bottom = 150; // E3 bottom
    const y3_top = 120; // E3 top

    const x_level_1_start = 80, x_level_1_end = 520;
    const x_level_2_start = 330, x_level_2_end = 520;
    const x_level_3_start = 120, x_level_3_end = 420;

    // Draw E1 level
    ctx.beginPath();
    ctx.moveTo(x_level_1_start, y1);
    ctx.lineTo(x_level_1_end, y1);
    ctx.stroke();

    // Draw E2 level
    ctx.beginPath();
    ctx.moveTo(x_level_2_start, y2);
    ctx.lineTo(x_level_2_end, y2);
    ctx.stroke();
    
    // Draw E3 band
    ctx.beginPath();
    ctx.rect(x_level_3_start, y3_top, x_level_3_end - x_level_3_start, y3_bottom - y3_top);
    ctx.stroke();

    // Draw transitions
    // Pumping: E1 -> E3
    const pump_x = 150;
    drawArrow(pump_x, y1, pump_x, y3_bottom);
    
    // Laser transition: E2 -> E1
    const laser_x = 450;
    drawArrow(laser_x, y2, laser_x, y1);
    
    // Non-radiative decay: E3 -> E2
    const wavy1_start = { x: 280, y: 170 };
    const wavy1_p1 = { x: 300, y: 190 };
    const wavy1_p2 = { x: 290, y: 210 };
    const wavy1_end = { x: 310, y: 230 };
    ctx.beginPath();
    ctx.moveTo(wavy1_start.x, wavy1_start.y);
    ctx.lineTo(wavy1_p1.x, wavy1_p1.y);
    ctx.lineTo(wavy1_p2.x, wavy1_p2.y);
    ctx.lineTo(wavy1_end.x, wavy1_end.y);
    ctx.stroke();
    drawArrowHead(wavy1_p2.x, wavy1_p2.y, wavy1_end.x, wavy1_end.y);

    // Emitted photon hν
    const wavy2_start = { x: 470, y: 320 };
    const wavy2_p1 = { x: 485, y: 310 };
    const wavy2_p2 = { x: 500, y: 330 };
    const wavy2_end = { x: 515, y: 320 };
    ctx.beginPath();
    ctx.moveTo(wavy2_start.x, wavy2_start.y);
    ctx.lineTo(wavy2_p1.x, wavy2_p1.y);
    ctx.lineTo(wavy2_p2.x, wavy2_p2.y);
    ctx.lineTo(wavy2_end.x, wavy2_end.y);
    ctx.stroke();
    drawArrowHead(wavy2_p2.x, wavy2_p2.y, wavy2_end.x, wavy2_end.y);

    // Draw labels
    ctx.font = 'bold 26px "Georgia", serif';
    ctx.fillText('E\u2083', 440, 145); // E₃
    ctx.fillText('E\u2082', 530, 285); // E₂
    ctx.fillText('E\u208₁', 530, 385); // E₁

    ctx.font = 'italic bold 24px "Georgia", serif';
    ctx.fillText('h\u03BD', 475, 305); // hν (ν is U+03BD)
    
    ctx.font = 'bold 24px "Georgia", serif';
    ctx.fillText('Fig. 3.1', 250, 430);

</script>

</body>
</html>